<template>
  <div>
    <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>

<script>
/**1.toRaw...
 * 从reactive 或 ref 中得到原始数据
 *
 */
import { reactive, toRaw, ref } from "vue";
export default {
  name: "App",
  setup() {
    /**
     * ref / reactive 数据类型的特点：
     * 每次修改都会被追踪，都会更新ui界面，但是这样其实是非常消耗性能的
     * 所以如果我们有一些操作不需要追踪，不需要更新ui界面，那么这个时候，
     * 我们就可以通过toRaw 方法拿到它的原始数据，对原始数据进行修改
     * 这样就不会被追踪，这样就不会更新ui界面，这样性能就更好了
     */
    let obj = { name: "ls", age: 18 };
    // let state = reactive(obj);
    /**
     * 1.ref本质：reactive
     * ref(obj) -> reactive({value:obj})
     * 注意点：如果想通过toRaw 拿到ref类型的原始数据（创建时传入的那个数据）
     * 那么就必须明确的告诉toRaw方法，要获取的是.value的值
     * 因为经过Vue处理之后，.value中保存的才是当初创建时传入的那个原始数据
     */
    let state = ref(obj);
    let obj2 = toRaw(state.value);
    // console.log(obj2 === state);//true
    // console.log(state === obj); //false
    // state 和 obj的关系：
    // 引用关系，state 的本质是一个proxy 对象，在这个proxy 对象中引用了obj
    function myFn() {
      // 如果直接修改obj，那么是无法触发界面更新的
      // 只有通过包装之后的对象来修改，才会触发界面的更新
      obj2.name = "zs";
      console.log(obj2);
      // state.name = "zs";
      // console.log(state);
    }
    return { state, myFn };
  }
};
</script>

